<template>
  <view class="week_all">
    <view
      v-for="(day, index) in daysOfWeek"
      :key="index"
      class="week_btn"
      :style="buttonStyles[day]"
      @tap="clickDay(day, weekReservation[`schedule${day}State`])"
    >
      {{ day }}
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      weekReservation: Object,
    },
    data() {
      return {
        daysOfWeek: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      }
    },
    computed: {
      buttonStyles() {
        const styles = {}
        this.daysOfWeek.forEach((day) => {
          const stateKey = `schedule${day}State`
          styles[day] = this.getButtonStyle(this.weekReservation[stateKey])
        })
        return styles
      },
    },
    methods: {
      getButtonStyle(state) {
        // 根据状态返回不同的样式
        switch (state) {
          case 0:
            return { color: 'black', backgroundColor: 'white' }
          case 1:
            return { color: 'red', backgroundColor: 'lightgray' }
          default:
            return { color: 'black', backgroundColor: 'white' }
        }
      },
      clickDay(day, state) {
        console.log('Clicked day:', day, 'State:', state)
      },
    },
  }
</script>

<style scoped>
  .week_all {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-evenly;
  }

  .week_btn {
    text-align: center;
    width: 90rpx;
    height: 90rpx;
    background-color: #008000;
    border-color: #008000;

    color: #fff;
    border-radius: 10rpx;
    line-height: 90rpx;
  }
</style>
